import type { Meta, StoryObj } from '@storybook/react-webpack5';
import Input from './index';
import DropdownInput from './Dropdown';

const meta: Meta<typeof Input> = {
  title: '第八章：Input',
  component: Input,
};
export default meta;

type Story = StoryObj<typeof Input>;

export const ADefault: Story = {
  args: {
    placeholder: '请输入内容',
    disabled: false,
  },
  name: '默认输入框',
};

export const BDisabled: Story = {
  args: {
    ...ADefault.args,
    disabled: true,
    placeholder: '禁用输入框',
  },
  name: '禁用输入框',
};

export const CTextArea: Story = {
  render: () => (
    <Input.TextArea placeholder="多行文本输入" autoSize />
  ),
  name: '多行文本输入（TextArea）',
};

export const DSearch: Story = {
  render: (args) => (
    <Input.Search {...args} placeholder="搜索内容" enterButton="搜索" onSearch={value => alert(value)} />
  ),
  name: '搜索框（Search）',
};

export const EPassword: Story = {
  render: (args) => (
    <Input.Password {...args} placeholder="请输入密码" />
  ),
  name: '密码输入框（Password）',
};

export const FDropdownDefault: Story = {
  render: () => (
    <DropdownInput value="输入的文字" placeholder="请输入内容" style={{ width: 300 }} />
  ),
  name: '下拉输入框-默认',
};

export const GDropdownOverflow: Story = {
  render: () => (
    <DropdownInput value={"这是一段超长的内容，会触发下拉箭头的出现，点击可展开全部内容。".repeat(3)} placeholder="请输入内容" style={{ width: 300 }} />
  ),
  name: '下拉输入框-内容溢出',
}; 